<template>
<div class="ce-history-detail">
  <h1 class="ce-history-detail__config_title">配置信息</h1>
  <el-descriptions
    :column="1"
    :border="true"
  >
    <el-descriptions-item label="触发时间" width="100">{{data.config.cronTime}}</el-descriptions-item>
    <el-descriptions-item label="执行目标">{{data.config.command}}</el-descriptions-item>
    <el-descriptions-item label="执行参数">{{data.config.args}}</el-descriptions-item>
  </el-descriptions>

  <h1>任务信息</h1>
  <el-descriptions :border="true">
    <el-descriptions-item label="状态" span="3">{{data.message}}</el-descriptions-item>
    <el-descriptions-item label="任务ID" span="2">{{data.job.id}}</el-descriptions-item>
    <el-descriptions-item label="进程ID" span="1">{{data.job.pid}}</el-descriptions-item>
    <el-descriptions-item label="开始时间" span="3">{{dateFormat(data.job.startTime)}}</el-descriptions-item>
    <el-descriptions-item label="结束时间" span="3">{{dateFormat(data.job.endTime)}}</el-descriptions-item>
    <el-descriptions-item label="用时">{{interval}} 秒</el-descriptions-item>
    <el-descriptions-item label="手动终止">{{data.job.killed ? '是' : '否'}}</el-descriptions-item>
    <el-descriptions-item label="退出代码">{{data.job.exitCode}}</el-descriptions-item>
  </el-descriptions>

  <h1 class="ce-history-detail__std_title">运行情况</h1>
  <el-tabs>
    <el-tab-pane label="标准输出">
      <el-input
        type="textarea"
        readonly
        placeholder="无数据"
        :value="data.job.stdout"
        :autosize="{ minRows: 4, maxRows: 16 }" />
    </el-tab-pane>
    <el-tab-pane label="标准错误">
      <el-input
        type="textarea"
        readonly
        placeholder="无数据"
        :value="data.job.stderr"
        :autosize="{ minRows: 4, maxRows: 16 }" />
    </el-tab-pane>
  </el-tabs>
</div>


</template>

<script>
export default {
  name: 'ceHistoryDetail'
}
</script>
<script setup>
import { computed, defineProps } from "vue";
import dayjs from 'dayjs';

const props = defineProps({
  data: {
    type: Object,
    required: true,
  }
})

const interval = computed(() => {
  let endTime = props.data.job.endTime
  if (!endTime) endTime = new Date()

  return (endTime - props.data.job.startTime) / 1000
})

const dateFormat = (date) => dayjs(date).format('YYYY-MM-DD HH:mm:ss')
</script>

<style>
.ce-history-detail__config_title {
  margin-top: -16px;
}

.ce-history-detail__std_title {
  margin-bottom: 0;
}

.ce-history-detail .el-tabs__header {
  margin-bottom: 0;
}

.ce-history-detail .el-textarea__inner {
  border-radius: 0;
}
</style>